<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mess-index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/vue3.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js">
    </script>
    <script src="index.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <table id="table"></table>
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script>
        let app = Vue.createApp({
            data() {
                return {
                }
            },
            methods: {
                initTable() {
                    axios({
                        url: 'http://192.168.50.70:8081/messagebook/messagebook/list',
                        method: "GET"
                    }).then(res => {
                        console.log(res);
                        $("#table").bootstrapTable({
                            striped: true, //隔行换色
                            search: true, //定义右上方的搜索框，输入即可以开始搜索
                            toolbar: '#toolbar', //工具按钮用哪个容器
                            data: res.data.data,
                            undefinedText: "-",
                            pagination: true, //是否显示分页（*）
                            sortable: true, //是否启用排序
                            sortOrder: "asc", //排序方式
                            loadingFontSize: 13, // 自定义加载文本的字体大小
                            queryParamsType: "limit",
                            sidePagination: "client", //分页方式：client 客户端分页，server 服务端分页（*）
                            pageNumber: 1, //初始化加载第一页，默认第一页
                            pageSize: 2, //每页的记录行数（*）
                            pageList: [1, 2], //可供选择的每页的行数（*）
                            showColumns: false, //是否显示所有的列
                            minimumCountColumns: 1, //最少允许的列数
                            clickToSelect: true, //是否启用点击选中行
                            strictSearch: true,
                            showToggle: false, //是否显示详细视图和列表视图的切换按钮
                            uniqueId: "userId", //每一行的唯一标识，一般为主键列
                            cardView: false, //是否显示详细视图
                            showExport: false, //是否显示导出
                            exportDataType: 'basic', //'basic', 'all', 'selected'.
                            escape: true, //html转意
                            align: "center",
                            columns: [{
                                    field: 'state',
                                    checkbox: true,
                                    align: 'center',
                                    valign: 'middle'
                                },
                                {
                                    title: '留言标题',
                                    field: 'title',
                                    align: 'center',
                                    valign: 'middle',
                                    sortable: true
                                },
                                {
                                    title: '留言板块',
                                    field: 'plaent',
                                    sortable: true,
                                    align: 'center'
                                },
                                {
                                    title: '用户',
                                    field: 'userid',
                                    sortable: true,
                                    align: 'center'
                                },
                                {
                                    title: '留言时间',
                                    field: 'createDatetime',
                                    align: 'center',
                                    clickToSelect: false
                                },
                                {
                                    title: '留言ip',
                                    field: 'ip',
                                    align: 'center',
                                    clickToSelect: false
                                },
                                {
                                    title: '操作',
                                    align: 'center',
                                    clickToSelect: false,
                                    formatter: operateFormatter
                                }
                            ],
                        });
                    })
                },
            },
            mounted() {
                this.initTable();
            }
        });
        app.mount($("#app"));



        function responseHandler(data) {
            return data.data;
        }

        /* 表格加载成功事件 */
        function tableLoadSuccess(data) {
            $(".bs-checkbox").css('vertical-align', 'middle');
        }


        function operateFormatter(value, row, index) {
            if (row.nickName == "admin") {
                return `<button class="btn btn-default" onclick="to_info(${row.userId})">信息</button>`
            }
            return [
                `<button class="btn btn-info" onclick="to_auth(${row.userId})">授权</button>`,
                `<button class="btn btn-default" onclick="to_info(${row.userId})">信息</button>`
            ].join('')
        }
    </script>
</body>

</html>